<template>
  <view>
    <!-- components/goodsRecommendation/goodsRecommendation.wxml -->

    <view class="goods-recommend-title my-recommend-title" :style="'color:' + baseColor"
      v-if="recommendGoods.length > 0">
      
      <text class="goods-recommend-title-line"></text>
      <text class="goods-recommend-title-line"></text>
      <text class="goods-recommend-title-line"></text>
      <text class="goods-recommend-title-name" style="color: #40434D">{{ title }}</text>
      <text class="goods-recommend-title-line2"></text>
      <text class="goods-recommend-title-line2"></text>
      <text class="goods-recommend-title-line2"></text>
    </view>
    <view class="goods-recommend-list my-recommend-list">
      <navigator class="goods-recommend-item my-recommend-item"
        :url="'/subPackages/mall/pages/goods/goods?goodsId=' + item.id" v-for="(item, index) in recommendGoods"
        :key="item.id">
        <image class="goods-recommend-item-image my-recommend-item-image" :src="baseUrl + '/' + item.img" :lazy-load="true"></image>

        <view class="goods-recommend-item-info">
          <view class="goods-recommend-item-name">{{ item.name }}</view>
          <view class="goods-recommend-item-price">
            <view class="goods-recommend-item-price-norm" :style="'color:' + baseColor + ';'">
              <!-- parse <template v-if="(!item.hasDisPrice)" is="money" :data="money:item.price,fontSize:30"></template> -->
              <template name="money"  v-if="(!item.hasDisPrice)">
                <view style="display: flex; align-items: baseline; line-height: 1" class="num">
                  <text :style="'font-size:' + 30 * 0.7 + 'rpx;'">¥</text>
                  <text :style="'font-size:' + 30 + 'rpx;'">{{ util.integerMoney(item.price) }}</text>
                  <text :style="'font-size:' + 30 * 0.7 + 'rpx;'">{{ util.decimalMoney(item.price) }}</text>
                </view>
              </template>
              <!-- parse <template v-if="item.hasDisPrice" is="money" :data="money:item.disPrice,fontSize:30"></template> -->
              <template name="money" v-if="item.hasDisPrice">
                <view style="display: flex; align-items: baseline; line-height: 1" class="num">
                  <text :style="'font-size:' + 30 * 0.7 + 'rpx;'">¥</text>
                  <text :style="'font-size:' + 30 + 'rpx;'">{{ util.integerMoney(item.price) }}</text>
                  <text :style="'font-size:' + 30 * 0.7 + 'rpx;'">{{ util.decimalMoney(item.price) }}</text>
                </view>
              </template>
              <text v-if="item.hasDisPrice"
                style="color: #65c4aa; border: 1px solid #65c4aa; font-size: 16rpx; line-height: 24rpx; padding: 0 2rpx; height: 28rpx; border-radius: 4rpx">
                限时折扣
              </text>
            </view>
            <!-- <text class='goods-recommend-item-price-vip' v-if='("yes" == item.openVip) && !util.isEmpty(item.vipprice) && ("0.00" != item.vipprice)'>{{"VIP ￥" + item.vipprice}}</text> -->
            <view class="goods-recommend-item-price-other" v-if="!needOther">
              <text class="goods-recommend-item-price-old"
                v-if="!isEmpty(item.oldPrice) && !isEqual(item.oldPrice, item.price) && !item.hasDisPrice">
                {{ '¥' + money(item.oldPrice) }}
              </text>
              <text class="goods-recommend-item-price-old"
                v-if="item.hasDisPrice">{{ '¥' + money(item.price) }}</text>
              <text class="goods-recommend-item-sale">{{ item.salecount }}人付款</text>
            </view>
          </view>
        </view>
      </navigator>
    </view>
  </view>
</template>
<script module="util" lang="wxs" src="../../utils/util.wxs"></script>
<script>
  // components/goodsRecommendation/goodsRecommendation.js
	import {
		http
	} from '@/utils/commonRequest.js';
  const app = getApp();
  export default {
    data() {
      return {
        recommendGoods: [],
        //推荐商品列表1
        baseColor: '#E34B3A',
        baseUrl: '',
        currentPage: 1,
        isLoading: false,
        //防止用户不停刷新
        haveMore: true //是否还有更多数据加载
      };
    },
    /**
     *组件的外部样式（部分页面需要自定义样式时可用）
     */
    externalClasses: ['my-recommend-title', 'my-recommend-list', 'my-recommend-item', 'my-recommend-item-image'],
    /**
     * 组件的属性列表
     */
    props: {
      title: {
        type: String,
        default: '您可能喜欢'
      },
      from: {
        type: String,
        default: 'trollery'
      },
      needOther: {
        type: Boolean,
        default: false
      }
    },
    /**
     * 组件的方法列表
     */
    methods: {
      money(s) {
        if (undefined == s || '' == s || null == s) {
          return '0.00';
        } else {
          return parseFloat(s).toFixed(2);
        }
      },
      //判断两个数字是否相等
      isEqual(a, b) {
        if (parseFloat(a).toFixed(2) == parseFloat(b).toFixed(2)) {
          return true
        }
        return false
      },
      isEmpty(s) {
        return undefined == s || '' == s || null == s;
      },
      getRecommendGoods() {
				console.log("查询推荐商品")
        var that = this;
        if (!that.haveMore || that.isLoading || (that.recommendGoods && that.recommendGoods.length > 0)) {
          return;
        }
        that.isLoading = true;
        http.get('/shop/likeGoods', {params:{
            from: that.from,
            pageNum: that.currentPage
          }})
          .then((res) => {
						res = res.data
            if ('200' == res.code) {
              const data = JSON.parse(res.msg);

              if (data.length > 0) {
                  this.recommendGoods = that.recommendGoods.concat(data[0])

                if ('true' == data[1].lastPage) {
                  that.haveMore = false;
                }
              }

              that.currentPage = that.currentPage + 1;
            }

            that.isLoading = false;
          })
          .catch((err) => {
            that.isLoading = false;
          });
      },
			clearRecommendGoods() {
				this.recommendGoods = [];
				this.currentPage = 1;
				this.haveMore = true;
				this.isLoading = false;
			}
    },
    beforeMount() {
        this.baseColor = app.globalData.platformConfig.baseColor
        this.baseUrl = app.globalData.baseurl
    }
  };
</script>
<style>
  /* components/goodsRecommendation/goodsRecommendation.wxss */

  .num {
    font-family: Arial;
  }

  .goods-recommend-title {
	  margin-top: 100rpx;
	  margin-bottom: 20rpx;
	  display: flex;
	  flex-direction: row;
	  align-items: center;
	  justify-content: center;
	}
	
	.goods-recommend-list {
	  display: flex;
	  flex-wrap: wrap;
	  margin-left: 20rpx;
	}
	
	.goods-recommend-item {
	  box-sizing: border-box;
	  padding: 10rpx;
	  width: 237rpx;
	  background-color: white;
	  margin: 0 1rpx 1rpx 0;
	}

  .goods-recommend-title-line {
    width: 30rpx;
    border-bottom: 1px solid;
    display: inline-block;
    border-image: linear-gradient(180deg, rgba(255, 150, 158, 1), rgba(255, 65, 80, 1)) 1 1;
    transform: rotate(135deg);
    
  }

  .goods-recommend-title-line2 {
    width: 30rpx;
    border-bottom: 1px solid;
    display: inline-block;
    border-image: linear-gradient(180deg,rgba(255, 65, 80, 1), rgba(255, 150, 158, 1) ) 1 1;
    transform: rotate(45deg);
  }

  .goods-recommend-title-name {
    margin: 0 20rpx;
    font-size: 32rpx;
  }

  .goods-recommend-item-image {
	  width: 217rpx;
	  height: 217rpx;
	  display: block;
	  border-radius: 4rpx;
	}

  .goods-recommend-item-info {
    padding: 10rpx;
    text-align: left;
  }

  .goods-recommend-item-name {
    height: 40rpx;
    margin-top: 10rpx;
    font-size: 24rpx;
    line-height: 40rpx;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .goods-recommend-item-price {
    margin-top: 10rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .goods-recommend-item-price-norm {
    height: 40rpx;
    line-height: 40rpx;
    font-size: 30rpx;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .goods-recommend-item-price-vip {
    height: 40rpx;
    line-height: 40rpx;
    font-size: 25rpx;
    background: #444;
    color: yellow;
    text-align: center;
    border-radius: 20rpx;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .goods-recommend-item-sale {
    color: #b2b2b2;
    flex-grow: 1;
    text-align: right;
  }

  .goods-recommend-item-price-old {
    height: 20rpx;
    text-decoration: line-through;
    color: #444;
  }

  .goods-recommend-item-price-other {
    display: flex;
    align-content: base-line;
    justify-content: space-between;
    font-size: 18rpx;
  }
</style>
